<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PaddleOCR 文字识别系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            border-radius: 5px 5px 0 0;
        }
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 16px;
        }
        .tab button:hover {
            background-color: #ddd;
        }
        .tab button.active {
            background-color: #2c3e50;
            color: white;
        }
        .tabcontent {
            display: none;
            padding: 20px;
            border: 1px solid #ccc;
            border-top: none;
            border-radius: 0 0 5px 5px;
            animation: fadeEffect 1s;
        }
        @keyframes fadeEffect {
            from {opacity: 0;}
            to {opacity: 1;}
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        input[type="file"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        button[type="submit"] {
            background-color: #2c3e50;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
        }
        button[type="submit"]:hover {
            background-color: #1a252f;
        }
        .result {
            margin-top: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
        }
        .loading {
            text-align: center;
            display: none;
        }
        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border-left-color: #2c3e50;
            animation: spin 1s linear infinite;
            display: inline-block;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .error {
            color: #e74c3c;
            padding: 10px;
            background-color: #fadbd8;
            border-radius: 4px;
            margin-top: 10px;
        }
        .header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        .back-btn {
            text-decoration: none;
            color: #2c3e50;
            display: flex;
            align-items: center;
            margin-right: 1rem;
            font-size: 1.2rem;
        }
        .footer {
            margin-top: 2rem;
            font-size: 12px;
            color: #666;
            padding: 10px;
            text-align: center;
        }
        .footer a {
            color: #666;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <a href="/" class="back-btn">← 返回主页</a>
            <h1>PaddleOCR 文字识别系统</h1>
        </div>
        
        <div class="tab">
            <button class="tablinks active" onclick="openTab(event, 'pdfTab')">PDF文档识别</button>
            <button class="tablinks" onclick="openTab(event, 'imageTab')">图片识别</button>
            <button class="tablinks" onclick="openTab(event, 'multiImageTab')">多图片识别</button>
            <button class="tablinks" onclick="openTab(event, 'asyncPdfTab')">异步PDF识别</button>
        </div>
        
        <!-- PDF识别 -->
        <div id="pdfTab" class="tabcontent" style="display: block;">
            <h2>PDF文档识别</h2>
            <form id="pdfForm">
                <div class="form-group">
                    <label for="pdfFile">选择PDF文件：</label>
                    <input type="file" id="pdfFile" accept=".pdf" required>
                </div>
                <div class="form-group">
                    <label for="pdfWatermarkMethod">水印去除方法：</label>
                    <select id="pdfWatermarkMethod">
                        <option value="color_filter">颜色过滤</option>
                        <option value="none">不去除</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="pdfLang">语言：</label>
                    <select id="pdfLang">
                        <option value="ch">中文</option>
                        <option value="en">英文</option>
                    </select>
                </div>
                <button type="submit">开始识别</button>
            </form>
            <div class="loading" id="pdfLoading">
                <div class="spinner"></div>
                <p>处理中，请稍候...</p>
            </div>
            <div class="result" id="pdfResult" style="display: none;"></div>
        </div>
        
        <!-- 图片识别 -->
        <div id="imageTab" class="tabcontent">
            <h2>单张图片识别</h2>
            <form id="imageForm">
                <div class="form-group">
                    <label for="imageFile">选择图片：</label>
                    <input type="file" id="imageFile" accept="image/*" required>
                </div>
                <div class="form-group">
                    <label for="imageWatermarkMethod">水印去除方法：</label>
                    <select id="imageWatermarkMethod">
                        <option value="color_filter">颜色过滤</option>
                        <option value="none">不去除</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="imageLang">语言：</label>
                    <select id="imageLang">
                        <option value="ch">中文</option>
                        <option value="en">英文</option>
                    </select>
                </div>
                <button type="submit">开始识别</button>
            </form>
            <div class="loading" id="imageLoading">
                <div class="spinner"></div>
                <p>处理中，请稍候...</p>
            </div>
            <div class="result" id="imageResult" style="display: none;"></div>
        </div>
        
        <!-- 多图片识别 -->
        <div id="multiImageTab" class="tabcontent">
            <h2>多张图片识别</h2>
            <form id="multiImageForm">
                <div class="form-group">
                    <label for="multiImageFiles">选择多张图片：</label>
                    <input type="file" id="multiImageFiles" accept="image/*" multiple required>
                </div>
                <div class="form-group">
                    <label for="multiImageWatermarkMethod">水印去除方法：</label>
                    <select id="multiImageWatermarkMethod">
                        <option value="color_filter">颜色过滤</option>
                        <option value="none">不去除</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="multiImageLang">语言：</label>
                    <select id="multiImageLang">
                        <option value="ch">中文</option>
                        <option value="en">英文</option>
                    </select>
                </div>
                <button type="submit">开始识别</button>
            </form>
            <div class="loading" id="multiImageLoading">
                <div class="spinner"></div>
                <p>处理中，请稍候...</p>
            </div>
            <div class="result" id="multiImageResult" style="display: none;"></div>
        </div>
        
        <!-- 异步PDF识别 -->
        <div id="asyncPdfTab" class="tabcontent">
            <h2>异步PDF识别</h2>
            <form id="asyncPdfForm">
                <div class="form-group">
                    <label for="asyncPdfFile">选择PDF文件：</label>
                    <input type="file" id="asyncPdfFile" accept=".pdf" required>
                </div>
                <div class="form-group">
                    <label for="asyncPdfWatermarkMethod">水印去除方法：</label>
                    <select id="asyncPdfWatermarkMethod">
                        <option value="color_filter">颜色过滤</option>
                        <option value="none">不去除</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="asyncPdfLang">语言：</label>
                    <select id="asyncPdfLang">
                        <option value="ch">中文</option>
                        <option value="en">英文</option>
                    </select>
                </div>
                <button type="submit">开始识别</button>
            </form>
            <div class="loading" id="asyncPdfLoading">
                <div class="spinner"></div>
                <p>处理中，请稍候...</p>
            </div>
            <div class="result" id="asyncPdfResult" style="display: none;"></div>
        </div>
    </div>

    <script>
        // 切换标签页
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }

        // 获取服务器基础URL
        const baseUrl = window.location.origin;

        // PDF识别
        document.getElementById('pdfForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const fileInput = document.getElementById('pdfFile');
            const watermarkMethod = document.getElementById('pdfWatermarkMethod').value;
            const lang = document.getElementById('pdfLang').value;
            
            if (fileInput.files.length === 0) {
                alert('请选择PDF文件');
                return;
            }
            
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            formData.append('watermark_removal_method', watermarkMethod);
            formData.append('lang', lang);
            
            document.getElementById('pdfLoading').style.display = 'block';
            document.getElementById('pdfResult').style.display = 'none';
            
            fetch(`${baseUrl}/paddle_ocr/extract_text_from_pdf/`, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.json();
            })
            .then(data => {
                document.getElementById('pdfLoading').style.display = 'none';
                document.getElementById('pdfResult').style.display = 'block';
                document.getElementById('pdfResult').textContent = JSON.stringify(data, null, 2);
            })
            .catch(error => {
                document.getElementById('pdfLoading').style.display = 'none';
                document.getElementById('pdfResult').style.display = 'block';
                document.getElementById('pdfResult').innerHTML = `<div class="error">错误: ${error.message}</div>`;
            });
        });

        // 图片识别
        document.getElementById('imageForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const fileInput = document.getElementById('imageFile');
            const watermarkMethod = document.getElementById('imageWatermarkMethod').value;
            const lang = document.getElementById('imageLang').value;
            
            if (fileInput.files.length === 0) {
                alert('请选择图片文件');
                return;
            }
            
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            formData.append('watermark_removal_method', watermarkMethod);
            formData.append('lang', lang);
            
            document.getElementById('imageLoading').style.display = 'block';
            document.getElementById('imageResult').style.display = 'none';
            
            fetch(`${baseUrl}/paddle_ocr/extract_text_from_image/`, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.json();
            })
            .then(data => {
                document.getElementById('imageLoading').style.display = 'none';
                document.getElementById('imageResult').style.display = 'block';
                document.getElementById('imageResult').textContent = JSON.stringify(data, null, 2);
            })
            .catch(error => {
                document.getElementById('imageLoading').style.display = 'none';
                document.getElementById('imageResult').style.display = 'block';
                document.getElementById('imageResult').innerHTML = `<div class="error">错误: ${error.message}</div>`;
            });
        });

        // 多图片识别
        document.getElementById('multiImageForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const fileInput = document.getElementById('multiImageFiles');
            const watermarkMethod = document.getElementById('multiImageWatermarkMethod').value;
            const lang = document.getElementById('multiImageLang').value;
            
            if (fileInput.files.length === 0) {
                alert('请选择至少一张图片');
                return;
            }
            
            const formData = new FormData();
            for (let i = 0; i < fileInput.files.length; i++) {
                formData.append('files', fileInput.files[i]);
            }
            formData.append('watermark_removal_method', watermarkMethod);
            formData.append('lang', lang);
            
            document.getElementById('multiImageLoading').style.display = 'block';
            document.getElementById('multiImageResult').style.display = 'none';
            
            fetch(`${baseUrl}/paddle_ocr/extract_text_from_multiple_images/`, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.json();
            })
            .then(data => {
                document.getElementById('multiImageLoading').style.display = 'none';
                document.getElementById('multiImageResult').style.display = 'block';
                document.getElementById('multiImageResult').textContent = JSON.stringify(data, null, 2);
            })
            .catch(error => {
                document.getElementById('multiImageLoading').style.display = 'none';
                document.getElementById('multiImageResult').style.display = 'block';
                document.getElementById('multiImageResult').innerHTML = `<div class="error">错误: ${error.message}</div>`;
            });
        });

        // 异步PDF识别
        document.getElementById('asyncPdfForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const fileInput = document.getElementById('asyncPdfFile');
            const watermarkMethod = document.getElementById('asyncPdfWatermarkMethod').value;
            const lang = document.getElementById('asyncPdfLang').value;
            
            if (fileInput.files.length === 0) {
                alert('请选择PDF文件');
                return;
            }
            
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            formData.append('watermark_removal_method', watermarkMethod);
            formData.append('lang', lang);
            
            document.getElementById('asyncPdfLoading').style.display = 'block';
            document.getElementById('asyncPdfResult').style.display = 'none';
            
            fetch(`${baseUrl}/paddle_ocr/extract_text_from_pdf_async/`, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.json();
            })
            .then(data => {
                document.getElementById('asyncPdfLoading').style.display = 'none';
                document.getElementById('asyncPdfResult').style.display = 'block';
                document.getElementById('asyncPdfResult').textContent = JSON.stringify(data, null, 2);
            })
            .catch(error => {
                document.getElementById('asyncPdfLoading').style.display = 'none';
                document.getElementById('asyncPdfResult').style.display = 'block';
                document.getElementById('asyncPdfResult').innerHTML = `<div class="error">错误: ${error.message}</div>`;
            });
        });
    </script>

    <div class="footer">
        服务备案号：<a href="https://beian.miit.gov.cn" target="_blank">津ICP备2025033698号-1</a>
        <p style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
            <a href="https://beian.mps.gov.cn" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #666;">
                <img src="https://beian.mps.gov.cn/web/assets/logo01.6189a29f.png" alt="公安联网备案图标" style="height: 18px; margin-right: 5px;">
                津公网安备12010402002269号
            </a>
        </p>
    </div>
</body>
</html>
